<!--
  列表组件里的表头列封装

  用法：
    <qm-table-column field="username" title="名称"></qm-table-column>
    或
    <qm-table-column field="username">名称</qm-table-column>

  参数：
    field：字段，实体的某个属性
    title：表头名称
-->
<template>
  <vxe-column ref="qmTableColumn" v-bind="$attrs" :sortable="computedSortable">
    <template v-if="!$attrs.title" #header>
      <slot />
    </template>
    <template #default="{row, rowIndex, column, columnIndex}">
      <slot
        name="content"
        :row="row"
        :rowIndex="rowIndex"
        :column="column"
        :columnIndex="columnIndex"
      >{{ format(row[column.property], row, rowIndex, column, columnIndex) }}</slot>
    </template>
  </vxe-column>
</template>

<script>
import _ from 'lodash'
import VXETable from 'vxe-table'
export default {
  name: 'qm-table-column',
  props: {
    // 字段类型，取值：sex、datetime、date、number、money、yesno、enabledisable、enum、fileSize
    fieldtype: {
      type: String
    },
    // 冗余，和上面 fieldtype作用一样
    fieldType: {
      type: String
    },
    // 对于fieldtype为enum的列，还需指定enumOptions，从这里面选出对应的文字内容
    enumOptions: {
      type: Array,
      default: () => []
    },
    // 对于fieldtype为dict的列，还需指定dictOptions，从这里面选出对应的文字内容
    dictOptions: {
      type: Array,
      default: () => []
    },
    // 对于fieldtype为json的列，还需指定jsonObject，从这里面选出对应的文字内容
    jsonObject: {
      type: Object,
      default: () => {}
    },
    // 内容渲染的方法，可用于自定义列内容，目前暂不支持html内容渲染，请用content的slot来替代
    renderFunc: {
      type: Function
    },
    // 列排序，取值boolean值或boolean值的字符串（true 或 false）
    sortable: {
      type: Boolean | String,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    computedSortable() {
      if (this.sortable && _.isString(this.sortable)) {
        return this.sortable.toLowerCase() === 'true'
      }
      if (this.sortable === '') {
        return true
      }
      return !!this.sortable
    },
    formatter() {
      const ft = this.fieldtype || this.fieldType
      return ft ? this.formatterMap(ft) : ''
    }
  },
  methods: {
    format(cellValue, row, rowIndex, column, columnIndex) {
      if (this.renderFunc) {
        return this.renderFunc(cellValue, row, column)
      }
      const formatter = this.formatter
      if (!formatter) {
        return cellValue
      } else if (_.isString(formatter)) {
        const f = VXETable.formats.store[formatter]
        if (_.isFunction(f)) {
          return f({ cellValue })
        }
        return cellValue
      } else if (_.isArray(formatter)) {
        const fn = formatter[0]
        const params = formatter[1]
        const f = VXETable.formats.store[fn]
        if (_.isFunction(f)) {
          return f({ cellValue }, params)
        }
        return cellValue
      }
    },
    formatterMap(ft) {
      return {
        sex: 'formatSex',
        datetime: 'formatDate',
        date: ['formatDate', 'yyyy-MM-dd'],
        time: ['formatDate', 'HH:mm:ss'],
        number: 'formatFixedNumber',
        money: 'formatAmount',
        yesno: 'formatYesno',
        enabledisable: 'formatEnabledisable',
        enum: ['formatSelect', this.enumOptions],
        dict: ['formatDictSelectByCode', this.dictOptions],
        fileSize: 'formatFileSize',
        json: ['formatJson', this.jsonObject]
      }[ft]
    }
  }
}
</script>

<style>
</style>
